<template>
	<view class="search">
		<view class="first-search">
			<MySearch :searchname="Searchname"></MySearch>
		</view>
		<view class="second-text">
			<text>推荐搜索</text>
		</view>
		<!-- 推荐 -->
		<view class="second-search">
			<sec-search :secSearchData="secSearchListData"></sec-search>
		</view>
		<!-- 热门推荐 -->
		<view class="three-text">
			<text>热门推荐</text>
		</view>
		<!-- 文章 -->
		<view class="my-essay">
			<MyEssay :textlist="testList" :isShow="false"></MyEssay>
		</view>
	</view>
</template>

<script>
	import MySearch from '@/components/MySearch.vue'
	import secSearch from '@/components/secSearch.vue'
	import MyEssay from '@/components/MyEssay.vue'
	export default {
		data() {
			return {
				secSearchListData: [],
				testList: [

				],
				Searchname: '取消',
				arcInfo: {
					category_id: '',
					current: 1,
					orderByTime: '',
					size: 10,
					title: ''
				}
			}
		},
		components: {
			MySearch,
			secSearch,
			MyEssay
		},
		mounted() {
			this.testList = this.$store.state.article.actircleinfo
			const arr1 = this.$store.state.docter.categoryId[1]
			const arr2 = this.$store.state.docter.categoryId[2]
			this.secSearchListData = [arr1, arr2]
		},
		methods: {
			//得到首页文章
			async GetIndexActile(data) {
				data.category_id = this.catgoryc // 得到文章Id
				data.orderByTime = this.index
				let res = this.$store.dispatch('GetindexAllInfo', data)
				res.then(() => {
					this.testList = this.$store.state.article.actircleinfo
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		width: 750rpx;

		.first-search {
			width: 750rpx;
			height: 70rpx;
			// background-color: antiquewhite;
		}

		// 
		.second-text {
			width: 200rpx;
			height: 60rpx;
			margin-top: 10rpx;
			font-size: 25rpx;
			margin-left: 25rpx;
		}

		// 
		.second-search {
			width: 750rpx;
			height: 100rpx;

		}

		// 
		.three-text {
			width: 200rpx;
			height: 60rpx;
			font-size: 25rpx;
			margin-left: 25rpx
		}

		// 文章
		.my-essay {
			width: 750rpx;
			height: auto;

		}

	}
</style>
